<template>
  <div class="jqgz">
    <el-breadcrumb separator="/" class="mianbao">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>假期管理</el-breadcrumb-item>
      <el-breadcrumb-item>假期规则</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="main"><p>假期规则</p></div>
    
    <div class="type">
      <p>假期类型</p> <p>请假单位</p> <p>最小请假时长(0.5天)</p>  <p>状态</p><p>请假步长(1天)</p>
       <p>操作</p>
    </div>
<el-button class="add" @click="toadd()" type="primary">新增规则</el-button>
     <el-table :data="tableData"  stripe style="width: 100%">
      <el-table-column label="规则名称(年假)" prop='guize' />
      <el-table-column label="请假时间计算(天)" prop='time'/>
      <el-table-column label="适用范围" prop='fanwei'/>
      <el-table-column label="状态" prop='falg'/>
    <el-table-column label="操作" >
        <template #default="scope">
            <el-button @click="dalatenj(scope.row.id)" type="danger">删除</el-button>
        </template>
    </el-table-column>
  </el-table>


     <el-table :data="tableData1"  stripe style="width: 100%">
      <el-table-column label="规则名称(事假)" prop='guize' />
      <el-table-column label="请假时间计算(天)" prop='time'/>
      <el-table-column label="适用范围" prop='fanwei'/>
      <el-table-column label="状态" prop='falg'/>
    <el-table-column label="操作" >
        <template #default="scope">
            <el-button @click="dalatesj(scope.row.id)" type="danger">删除</el-button>
        </template>
    </el-table-column>
  </el-table>

   <el-table :data="tableData2"  stripe style="width: 100%">
      <el-table-column label="规则名称(婚假)" prop='guize' />
      <el-table-column label="请假时间计算(天)" prop='time'/>
      <el-table-column label="适用范围" prop='fanwei'/>
      <el-table-column label="状态" prop='falg'/>
    <el-table-column label="操作" >
        <template #default="scope">
            <el-button @click="dalatehj(scope.row.id)" type="danger">删除</el-button>
        </template>
    </el-table-column>
  </el-table>


   <el-table :data="tableData3"  stripe style="width: 100%">
      <el-table-column label="规则名称(产假)" prop='guize' />
      <el-table-column label="请假时间计算(天)" prop='time'/>
      <el-table-column label="适用范围" prop='fanwei'/>
      <el-table-column label="状态" prop='falg'/>
    <el-table-column label="操作" >
        <template #default="scope">
            <el-button @click="dalatecj(scope.row.id)" type="danger">删除</el-button>
        </template>
    </el-table-column>
  </el-table>


   <el-table :data="tableData4"  stripe style="width: 100%">
      <el-table-column label="规则名称(调休)" prop='guize' />
      <el-table-column label="请假时间计算(天)" prop='time'/>
      <el-table-column label="适用范围" prop='fanwei'/>
      <el-table-column label="状态" prop='falg'/>
    <el-table-column label="操作" >
        <template #default="scope">
            <el-button  @click="dalatetx(scope.row.id)" type="danger">删除</el-button>
        </template>
    </el-table-column>
  </el-table>


   <el-table :data="tableData5"  stripe style="width: 100%">
      <el-table-column label="规则名称(病假)" prop='guize' />
      <el-table-column label="请假时间计算(天)" prop='time'/>
      <el-table-column label="适用范围" prop='fanwei'/>
      <el-table-column label="状态" prop='falg'/>
    <el-table-column label="操作" >
        <template #default="scope">
            <el-button @click="dalatebj(scope.row.id)" type="danger">删除</el-button>
        </template>
    </el-table-column>
  </el-table>


   <el-table :data="tableData6"  stripe style="width: 100%">
      <el-table-column label="规则名称(其他假期)" prop='guize' />
      <el-table-column label="请假时间计算(天)" prop='time'/>
      <el-table-column label="适用范围" prop='fanwei'/>
      <el-table-column label="状态" prop='falg'/>
    <el-table-column label="操作" >
        <template #default="scope">
            <el-button @click="dalateqt(scope.row.id)" type="danger">删除</el-button>
        </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script setup>
import { nianjiatype,shijiatype,hunjiajiatype,chanjiatype,tiaoxiutype,bingjiatype,qitatype,nianjiatype_delete,shijiatype_delete,hunjiajiatype_delete,chanjiatype_delete,tiaoxiutype_delete,bingjiatype_delete,qitatype_delete} from "@/api/ning/ning";
import { ref, onMounted } from "vue";
import { useRouter } from 'vue-router'
var $router=useRouter()

var tableData=ref([])
var tableData1=ref([])
var tableData2=ref([])
var tableData3=ref([])
var tableData4=ref([])
var tableData5=ref([])
var tableData6=ref([])
var toadd=()=>{
     $router.push('/index/xzgz');
}
var render=async()=>{
  var res = await nianjiatype();
  tableData.value=res.data

  var res = await shijiatype();
  tableData1.value=res.data

  var res = await hunjiajiatype();
  tableData2.value=res.data

  var res = await chanjiatype();
  tableData3.value=res.data

  var res = await tiaoxiutype();
  tableData4.value=res.data

  var res = await bingjiatype();
  tableData5.value=res.data

  var res = await qitatype();
  tableData6.value=res.data
}
onMounted(() => {
  render()

});
var dalatenj=async(id)=>{
    var res=await nianjiatype_delete(id)
    console.log(res);
   render()
}
var dalatesj=async(id)=>{
    var res=await shijiatype_delete(id)
    console.log(res);
   render()
}
var dalatehj=async(id)=>{
    var res=await hunjiajiatype_delete(id)
    console.log(res);
    render()
}
var dalatecj=async(id)=>{
    var res=await chanjiatype_delete(id)
    console.log(res);
    render()
}
var dalatetx=async(id)=>{
    var res=await tiaoxiutype_delete(id)
    console.log(res);
   render()
}
var dalatebj=async(id)=>{
    var res=await bingjiatype_delete(id)
    console.log(res);
  render()
}
var dalateqt=async(id)=>{
    var res=await qitatype_delete(id)
    console.log(res);
   render()
}

</script>

<style scoped lang='scss'>
.jqgz {
  width: 100%;
  .mianbao {
    margin-bottom: 20px;
  }
  .main {
    display: flex;
    padding: 15px;
    background-color: white;
    border-bottom: 1px solid #ccc;
  }
  .add{
    margin: 10px 0;
  }
  .type{
    background-color:rgb(227, 241, 245);
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
  }
  .el-table{
    margin-bottom: 10px;
  }
}
</style>